<template>
  <div class="all">
    <div class="head">
      <div>
        <span
          class="text-large font-600 mr-3"
          style="font-size: 22px; font-weight: bold; margin-left: 175px"
          >接报审批</span
        >
      </div>
    </div>
    <el-scrollbar height="540px" style="margin-top: 10px">
      <div
        v-for="(report, index) in reportInfo"
        :key="index"
        class="scrollbar-demo-item"
      >
        <p style="padding-top: 5px">
          <span style="margin-right: 40px">接报ID：{{ report.reportID }}</span>
          接报状态：<span :style="fontColorStyle(report)"
            >●{{ report.reportState }}</span
          >
        </p>
        <p>
          <span>接报名称：{{ report.reportName }}</span>
        </p>
        <p>
          <span>接报类型：{{ report.eventType }}</span>
        </p>
        <p>
          <span>报警人：{{ report.reporter }}</span>
          <span style="margin-left: 50px"
            >报警人电话：{{ report.reporterPhone }}</span
          >
        </p>
        <p>
          <span>报警时间：{{ formattedReportTime(report) }}</span>
        </p>
        <p>
          <span>最后更新者：{{ report.lastUpdater }}</span>
        </p>
        <p>
          <span 
            >最后更新时间：{{ formattedLastUpdateTime(report) }}</span
          >
        </p>
        <p>
          <span>事件ID：{{ report.eventID }}</span>

          <span style="margin-left: 30px"
            >风险企业名称：{{ report.enterpriseName }}</span
          >
        </p>
        <p>
          <span
            style="
              color: red;
              font-weight: bold;
              margin-left: 15px;
              margin-top: 10px;
            "
            >流程信息...(点击审批接报查看)</span
          >
          <el-button
            type="primary"
            class="button"
            plain
            @click="
              dialogInfo = true;
              display(report);
            "
            style="margin-bottom: 15px; margin-left: 70px"
            >审批接报</el-button
          >
        </p>
      </div>
    </el-scrollbar>
    <el-dialog
      v-model="dialogInfo"
      title="接报审批"
      width="400px"
      :style="{ height: '1100px' }"
    >
      <el-descriptions
        class="margin-top"
        :title="'接报ID：' + repoInfo.reportID"
        :column="1"
        size="default"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <tickets />
              </el-icon>
              事件类型
            </div>
          </template>
          <el-tag size="default">{{ repoInfo.eventType }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><List /></el-icon>
              接报名称
            </div>
          </template>
          {{ repoInfo.reportName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon><InfoFilled /></el-icon>
              接报状态
            </div>
          </template>

          <div :style="fontColorStyle(repoInfo)" class="state">
            ●{{ repoInfo.reportState }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <User />
              </el-icon>
              报警人
            </div>
          </template>
          {{ repoInfo.reporter }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <iphone />
              </el-icon>
              报警人电话
            </div>
          </template>
          {{ repoInfo.reporterPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <location />
              </el-icon>
              报警时间
            </div>
          </template>
          {{ repoInfo.reportTime }}
        </el-descriptions-item>
      </el-descriptions>

      <div
        class="cell-item"
        style="
          font-size: 20px;
          font-weight: bold;
          margin-top: 2px;
          margin-bottom: 2px;
        "
      >
        流程信息
      </div>

      <el-steps
        style="max-width: 600px; margin: 12px 12px"
        :active="active"
        finish-s
        tatus="success"
        align-center
        direction="vertical" 
        space="10px"
      >
        <el-step
          v-for="(content, step) in procedureInfo"
          :key="step"
          :title="'step' + (step + 1)"
          :description="content.procedureName + ':' + content.content"
        />
      </el-steps>
      <el-button
        style="margin-top: 12px; margin-left: 135px"
        @click="next"
        type="primary"
        >下一步</el-button
      >

      <el-descriptions
        class="margin-top"
        title="附加信息"
        :column="1"
        size="default"
      >
        <el-descriptions-item label="事件ID:">{{
          repoInfo.eventID
        }}</el-descriptions-item>
        <el-descriptions-item label="事件名:">{{
          repoInfo.eventName
        }}</el-descriptions-item>
        <el-descriptions-item label="工作人员备注:">{{
          repoInfo.remark
        }}</el-descriptions-item>
        <el-descriptions-item label="事件等级:">
          <el-tag size="default">{{ repoInfo.eventLevel }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="最后更新者:">
          {{ repoInfo.lastUpdater }}
        </el-descriptions-item>
        <el-descriptions-item label="最后更新时间:">
          {{ repoInfo.lastUpdateTime }}
        </el-descriptions-item>
        <el-descriptions-item label="风险企业名称:">
          {{ repoInfo.enterpriseName }}
        </el-descriptions-item>
        <el-descriptions-item label="企业合法人:">
          {{ repoInfo.legalPerson }}
        </el-descriptions-item>
        <el-descriptions-item label="企业合法人电话:">
          {{ repoInfo.legalpersonphone }}
        </el-descriptions-item>
      </el-descriptions>

      <div style="margin-left: 140px; margin-top: 1vw">
        <el-button type="success" v-if="isShow" @click="successInfo(repoInfo)"
          >审批通过</el-button
        >
        <el-button type="danger" plain @click="open(repoInfo)"
          >驳回该接报</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, inject, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { format, parseISO } from "date-fns";
import { ElMessage, ElMessageBox } from "element-plus";

const router = useRouter();
const route = useRoute();
const axios = inject("axios");
const reportInfo = ref({});
let dialogInfo = ref(false);
const procedureInfo = ref([]);
const active = ref(0);
const procedureNum = ref(0);
let isShow = ref(false);
const dates = ref(new Date());
const date = parseISO(dates.value.toISOString());
console.log(date)
const info = ref("");
const info1 = ref("");
const user = ref({});
user.value = JSON.parse(sessionStorage.getItem("user"))._value;
const repoInfo = ref({});

const fontColors = ref({
  待审批: "blue",
  已驳回: "red",
  专家人员审批中: "rgb(3, 127, 36)",
  指挥人员审批中: "rgb(2, 164, 164)",
  审核通过: "green",
});

const fontColorStyle = computed(() => {
  return (repoInfo) => ({
    color: fontColors.value[repoInfo.reportState] || "black",
  });
});

const display = (report) => {
  axios
    .post("Specialist/getReportById", {
      reportID: report.reportID,
    })
    .then((response) => {
      repoInfo.value = response.data;
      console.log(repoInfo.value);
    })
    .catch((error) => {
      console.log(error);
    });

  axios
    .post("Specialist/getProcedure", {
      eventType: report.eventType,
    })
    .then((response) => {
      procedureInfo.value = response.data;
      console.log(procedureInfo.value);
    })
    .catch((error) => {
      console.log(error);
    });

  axios
    .post("Specialist/getProcedureNum", {
      eventType: report.eventType,
    })
    .then((response) => {
      procedureNum.value = response.data;
      console.log(procedureNum.value);
    })
    .catch((error) => {
      console.log(error);
    });
};

const formattedReportTime = computed((repoInfo) => {
  return (repoInfo) => {
    const date =
      repoInfo.reportTime instanceof Date
        ? repoInfo.reportTime
        : parseISO(repoInfo.reportTime);
    return format(date, "yyyy-MM-dd HH:mm:ss");
  };
});
const open = (reportInfo) => {
  ElMessageBox.alert("确定驳回该接报吗？", {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: "确定",
    callback: (action) => {
      if (action == "confirm") {
        axios
          .post("/Specialist/renewreportState", {
            reportID: reportInfo.reportID,
            reportState: "已驳回",
          })
          .then((response) => {
            info1.value = response.data;
            console.log(info1.value);
          })
          .catch((error) => {
            console.log(error);
          });
        ElMessage({
          message: "接报驳回成功！",
          type: "success",
          plain: true,
        });
        dialogInfo = false;
        setTimeout(doSomethingAfterOneSecond, 1000);
      }
    },
  });
};

const doSomethingAfterOneSecond = () => {
  location.reload();
};
const successInfo = (reportInfo) => {
  console.log(date)
  axios
    .post("/Specialist/setUpdaterInfo", {
      lastUpdater: user.value.userName,
      lastUpdateTime: date,
      reportState: "审核通过",
      reportID: reportInfo.reportID,
    })
    .then((response) => {
      info.value = response.data;
      console.log(info.value);
      if (info.value == "1") {
        dialogInfo = false;
        ElMessage({
          message: "接报审批成功！",
          type: "success",
          plain: true,
          duration: 2000,
        });
        setTimeout(doSomethingAfterOneSecond, 2000);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

const next = () => {
  if (active.value++ >= procedureNum.value - 1) {
    console.log(procedureNum.value);
    active.value = procedureNum.value;
    isShow = true;
  }
};
const formattedLastUpdateTime = computed(() => {
  return (report) => {
    const date =
      report.lastUpdateTime instanceof Date
        ? report.lastUpdateTime
        : parseISO(report.lastUpdateTime);
    return format(date, "yyyy-MM-dd HH:mm:ss");
  };
});

const init = async () => {
  await axios
    .post("/Specialist/listAllReport", {})
    .then((response) => {
      reportInfo.value = response.data;
      console.log(reportInfo.value);
    })
    .catch((error) => {
      console.log(error);
    });
};
init();

const back = () => {
  router.go(-1);
};
</script>

<style scoped>
p {
  margin: 4px 10px;
}
span{
  font-size: 14px;
}
.scrollbar-demo-item {
  margin: 10px;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: rgb(63, 59, 59);
  margin-left: 1vw;

  position: relative;
}
</style>